<template>
  <div style="margin-top: 50px">
    <div
      style="
        width: 100vw;
        margin-top: 200px;
        height: 400px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
    >
      <div style="position: relative">
        <vue-qr
          :text="textCode"
          :callback="test"
          qid="testid"
          ref="qrcode"
          :size="300"
        ></vue-qr>
        <div
          @click="init()"
          style="
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 999;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border-radius: 50%;
          "
        >
          <van-icon size="24" name="sort" />
        </div>
      </div>

      <h3 style="margin-top: 50px">请截图或点击复制链接分享给需要访问人员</h3>
    </div>
    <div style="width: 100%; display: flex; justify-content: center">
      <van-button @click="handleCopy" type="primary">复制链接</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getmyguestcode } from "@/api/index";
// @ts-ignore
import vueQr from "vue-qr/src/packages/vue-qr.vue";
import useClipboard from "vue-clipboard3";
import { showToast } from "vant";
const textCode = ref("");
const handleCopy = async () => {
  const { toClipboard } = useClipboard();
  try {
    await toClipboard(textCode.value);
    showToast("复制成功");
  } catch (e) {
    console.error(e);
    showToast("复制失败");
  }
};
const qrcode = ref<typeof vueQr>(); // 实例
const init = async () => {
  let res = await getmyguestcode();
  textCode.value = `http://192.168.0.112:3000/visitorCheckin?checkcode=${res.data}`;
};
init();

const test = () => {
  console.log(1);
};
</script>

<style scoped></style>
